<template>
  <div class="person">
    <h2>情况二：监视【ref】 定义的 【对象类型】数据</h2>
    <h2>姓名：{{ person.name }}</h2>
    <h2>姓名：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue"

let person = ref({
  name: '张三',
  age: 19
})

function changeName() {
  person.value.name += '~'
}

function changeAge() {
  person.value.age += 1
}

function changePerson(){
  // person.value.name= '张飞'
  // person.value.age = 20
  person.value = {name:'张飞',age:30}
}

//监视 情况二：监视【ref】 定义的 【对象类型】数据,监视的是对象的地址值 如果要监视对象的内部属性变化，需要开启深度监视
watch(person,(newVal,oldVal)=>{  
  console.log('变化了',newVal,oldVal);
})


//开启深度监视 
watch(person,(newVal,oldVal)=>{  
  console.log('变化了',newVal,oldVal);
  // 参数1： deep(开启深度监视)  参数2: immediate 一开始就监视
},{deep:true,immediate:true})





</script>


<style lang="scss" scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  color: white;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
